<template>
  <div class="captured">
    <div v-if="capturedImage" class="captured_image">
      <img :src="capturedImage" alt="" />
      <div class="captured_tools">
        <div class="captured_tools_item" @click="closeCaptured">
          <CloseOutlined />
        </div>
        <div class="captured_tools_item" @click="finishCaptured">
          <CheckOutlined />
        </div>
      </div>
    </div>
    <div
      v-else
      class="mask"
      :style="'background-image:url(' + bg + ')'"
      @mousedown="startSelection"
      @mousemove="selectArea"
      @mouseup="endSelection"
    >
      <div
        v-if="isSelecting"
        class="selection-box"
        :style="selectionStyle"
      ></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { copyBase64ImageToClipboard, getCutImage } from '@renderer/utils';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';

onMounted(() => {
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      closeCaptured();
    }
  });

  globalThis.api.catchScreenCapture();
  globalThis.api.onCatchScreenCapture(getSource);
});

const bg = ref('');
const getSource = async (base64Url: any) => {
  bg.value = base64Url;
};

const isSelecting = ref(false);
const startX = ref(0);
const startY = ref(0);
const endX = ref(0);
const endY = ref(0);

const selectionStyle = ref({
  top: '0px',
  left: '0px',
  width: '0px',
  height: '0px'
});

const startSelection = (e: MouseEvent) => {
  isSelecting.value = true;
  startX.value = e.clientX;
  startY.value = e.clientY;
};

const selectArea = (e: MouseEvent) => {
  if (!isSelecting.value) return;
  endX.value = e.clientX;
  endY.value = e.clientY;
  updateSelectionBox();
};

const capturedImage = ref<string>('');
const endSelection = async () => {
  if (!isSelecting.value) return;
  isSelecting.value = false;

  const result = await getCutImage(
    {
      x: startX.value,
      y: startY.value,
      width: endX.value - startX.value,
      height: endY.value - startY.value
    },
    bg.value
  );

  globalThis.api.setCaptureWindowSize({
    top: startY.value,
    left: startX.value,
    width: endX.value - startX.value,
    height: endY.value - startY.value + 40
  });
  capturedImage.value = result;
  // console.log('result', result);
};

const updateSelectionBox = () => {
  const top = Math.min(startY.value, endY.value);
  const left = Math.min(startX.value, endX.value);
  const width = Math.abs(endX.value - startX.value);
  const height = Math.abs(endY.value - startY.value);

  selectionStyle.value = {
    top: `${top}px`,
    left: `${left}px`,
    width: `${width}px`,
    height: `${height}px`
  };
};

// 退出
const closeCaptured = () => {
  globalThis.api.routerBack();
};

// 完成
const finishCaptured = async () => {
  await copyBase64ImageToClipboard(capturedImage.value);
  closeCaptured();
};
</script>
<style scoped lang="less">
.captured {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .captured_image {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    -webkit-app-region: drag;
    > img {
      padding: 1px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 1) inset;
    }
    .captured_tools {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex: 1;
      -webkit-app-region: none;
      .captured_tools_item {
        background-color: #fff;
        padding: 0 10px;
        cursor: pointer;
      }
    }
  }
}
.mask {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  &:hover {
    cursor: crosshair;
  }
}
.selection-box {
  position: absolute;
  border: 2px dashed #fff;
  background: rgba(255, 255, 255, 0.3);
}
</style>
